<template>
    <div class="bottom">
        <div class="own">
            <span>关于我们</span>
            <span class="line">|</span>
            <span>用户隐私权政策</span>
            <span class="line">|</span>
            <span>用户服务协议</span>
            <span class="line">|</span>
            <span>练习我们</span>
        </div>
        <div class="icon">
            <el-popover placement="top-start" :width="400" trigger="hover">
                <template #default>
                    <div
                        class="title"
                        style="
                            text-align: center;
                            font-size: 20px;
                            font-weight: 700;
                        "
                    >
                        微信公众号
                    </div>
                    <div style="text-align: center">
                        扫描下方二维码关注我们的微信公众号，随时随地获取最新资讯
                    </div>
                    <div style="display: flex; justify-content: space-around">
                        <div>
                            <img
                                class="ma"
                                src="https://rs.dance365.com/zww_wechat_2021.jpg"
                                alt=""
                            />
                            <div style="text-align: center">中舞网</div>
                        </div>
                        <div>
                            <img
                                class="ma"
                                src="https://rs.dance365.com/dace365_contact_qrcode_410.png"
                                alt=""
                            />
                            <div style="text-align: center">中舞网</div>
                        </div>
                    </div>
                </template>
                <template #reference>
                    <span class="iconfont icon-weixin"></span>
                </template>
            </el-popover>

            <el-popover
                placement="top-start"
                :width="200"
                trigger="hover"
                content="电话号码：180-6168-5186"
            >
                <template #reference>
                    <span class="iconfont icon-24gf-telephone2"></span>
                </template>
            </el-popover>
        </div>
        <div>Copyright © 2010-2022 南京爱一格网络科技有限公司 版权所有</div>
        <div class="jingying">
            经营性许可证编号： 苏B2-20180515
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <img
                src="https://rs.dance365.com/jinying.png"
                style=""
            />苏网文〔2021〕4647-106号
        </div>
        <div class="jing">
            <img src="https://rs.dance365.com/pc/gongan.png" />
            苏ICP备20036081号
        </div>
    </div>
</template>

<script setup lang="ts">
import {} from "vue";
</script>

<style lang="less" scoped>
.bottom {
    widows: 100%;
    height: 257px;
    background-color: #221f23;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    padding-bottom: 10px;

    align-items: center;
    div {
        color: #eaecf0;
        font-size: 14px;
    }
    .own {
        font-size: 14px;
        text-align: center;
        padding: 20px 0;
        span {
            color: #eaecf0;
        }
        .line {
            margin: 0 95px;
        }
    }
    .icon {
        display: flex;
        width: 130px;
        margin: 28px auto 30px;
        justify-content: space-between;
        .iconfont {
            font-size: 32px;
        }
        .title {
        }
    }
    .jingying {
        position: relative;
        img {
            position: absolute;
            width: 20px;
            height: 20px;
            margin-top: 20px;
            top: -20px;
            left: 235px;
        }
    }
    .jing {
        position: relative;
        img {
            position: absolute;
            top: 0px;
            left: -20px;
        }
    }
}
.ma {
    width: 80px;
    height: 80px;
}
</style>
